/**
 * 这里是直接通过发送请求而获取到对应的音频源,返回的数据类型位arrayBuffer类型.
 * 再利用audio api来解析对应的音频数据
 * 将其绑定到数组中
 * 再通过数据中的数据,通过CanvasRenderingContext2D来绘制对应的图形
 * 从而使得原有的音频数据,出现这样的柱形图,实现数据的可视化
 * 
 * 另外种思路是可以通过绑定audio控件,来获取对应的音频数据源,其他地方基本一致
 */

$(function(){
	
	var canvas = document.getElementById('mycanvas'),   //获取canvas
		ac = new window.AudioContext(),     //获取对应的AudioContext
		size = 64,             //设置显示的柱子个数
		count = 0, 			   //播放数量
		source = null,		   //播放源
		analyser = ac.createAnalyser(),  //AnalyserNode节点
		gainNode = ac.createGain(),	     //GainNode节点
		ctx = canvas.getContext('2d'),	 //CanvasRenderingContext2D对象
		cWidth = canvas.width,
		cHeight = canvas.height,
		line = ctx.createLinearGradient(0,0,0,cHeight),  //渐变色
		xhr = new XMLHttpRequest();      
	
	analyser.connect(gainNode);
	gainNode.connect(ac.destination);
	analyser.fftSize = size * 4;
	line.addColorStop(0,'red');
	line.addColorStop(0.5,'yellow');
	line.addColorStop(1,'green');
	ctx.fillStyle = line;
	
	//加载音乐的请求
	function load(url){
		var n = ++count;
		source && source.stop();
		xhr.abort();
		xhr.open('GET',url);
		xhr.responseType = 'arraybuffer';
		xhr.send();
		
		//发送请求有数据返回的时候解析数据
		xhr.onload = function(){
			if(n!=count) return;
			//解析音乐数据
			ac.decodeAudioData(xhr.response,function(buffer){
				if(n!=count) return;
				var bufferSource = ac.createBufferSource();
				    bufferSource.buffer = buffer;
				    bufferSource.connect(analyser);
				    bufferSource.start();
				source = bufferSource;
			},function(err){
				console.log(err);
			})
		}
	}
	
	//控制数据可视化部分   0 静音 1 开始有声音  2有声音并重新加载对应的歌曲
	$(document).keypress(function(e){
		if(e.keyCode == 48){
			gainNode.gain.value = 0;
		}else if(e.keyCode == 49){
			gainNode.gain.value = 1;
		}else if(e.keyCode == 57){
			load('music/陈慧娴-千千阙歌.mp4');
			gainNode.gain.value = 1;
		}
	})
	
	load('music/陈慧娴-千千阙歌.mp4');
	
	//通过Analyser解析得到的音频数据,存到数组中,再将对应的数据通过requestAnimationFrame方法
	//不停的绘画出对应的音频数据,使得数据可视化
	function visualizer(){
		var arr = new Uint8Array(analyser.frequencyBinCount);
		
		function v(){
			analyser.getByteFrequencyData(arr);
			draw(arr);
			requestAnimationFrame(v);
		}
		v();
	}
	
	//通过CanvasRenderingContext2D来在canvas中绘制柱形
	function draw(arr){
		//清除原有的绘画,重新绘制
		ctx.clearRect(0,0,cWidth,cHeight);
		var w = cWidth /size;
		for(var i=0;i<size;i++){
			var h = arr[i]/256*cHeight;
			//绘制矩形区域
			ctx.fillRect(w*i,cHeight-h,w*0.6,h);
		}
	}
	
	visualizer();
})

/*$(function(){
	
	var canvas = document.getElementById('mycanvas');
		audio = document.getElementById('mymusic'),
		ac = new window.AudioContext(),
		count = 0,
		analyser = ac.createAnalyser(),
		audiosre = ac.createMediaElementSource(audio),
		gainNode = ac.createGain();
		ctx = canvas.getContext('2d');
		
	var cWidth = canvas.width,
		cHeight = canvas.height,	
		line = ctx.createLinearGradient(0,0,0,cHeight);
	
	gainNode.gain.value = 1;
	analyser.fftSize = size *4;
	audiosre.connect(analyser);
	analyser.connect(gainNode);
	gainNode.connect(ac.destination);
	
	line.addColorStop(0,'red');
	line.addColorStop(0.5,'yellow');
	line.addColorStop(1,'green');
	ctx.fillStyle = line;
	
	function renderFrame(){
		var arr = new Uint8Array(analyser.frequencyBinCount);
		
		function v(){
			analyser.getByteFrequencyData(arr);
			draw(arr);
			requestAnimationFrame(v);
		}
		v();
	}
	
	function draw(arr){
		ctx.clearRect(0,0,cWidth,cHeight);
		var w = cWidth/size;
		for(var i=0;i<size;i++){
			var h = arr[i] /256*cHeight;
			ctx.fillRect(w*i,cHeight-h,w*0.6,h);
		}
	}
	
	renderFrame();
});*/